﻿@{
    ViewBag.Title = "Konventionen 201";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<div class="span9">
    <h2>@ViewBag.Title</h2>
    <h3 id="jQuery">jQuery</h3>
    <h5>Einbindung</h5>
    <p>
        Mit Hilfe von jQuery und dessen Selektoren kann man sehr einfach bestimmte 
        Elemente innerhalb der DOM-Struktur finden und manipulieren, was ohne die 
        Hilfe von jQuery zwar auch geht, jedoch teilweise sehr umständlich ist.
    </p>
    <p>
        Damit man mit jQuery arbeiten kann, muss man als erstes die jQuery-Library 
        in die Seite in den <span class="label">&lt;head&gt;</span>-Tag wie folgt einbinden:
    </p>
    <pre class="prettyprint">
&lt;html&gt;
    &lt;head&gt;
        <span class="label label-info">Einbindung der jQuery Library</span>
        &lt;script type="text/javascript" src="../path/to/jquery.js"&gt;&lt;/script&gt;
    &lt;/head&gt;

    &lt;!-- Restliches DOM wurde aus Gr&uuml;nden der &uuml;bersichtlichkeit entfernt. --&gt;
&lt;/html&gt;
</pre>
    
    <h5>$.noConflict()</h5>
    <p>
        Da man unter Umständen mit mehr Libraries arbeitet als nur jQuery, muss 
        man sicher gehen, dass vor allem das $-Präfix nicht mehrfach belegt ist.
        Daf&uuml;r bietet jQuery die Funktion noConflict() an, die dazu dient, dass 
        man mit mehrere Libraries arbeiten kann, die ebenfalls das $-Präfix nutzen 
        (bspw. <a href="http://mootools.net/" target="_blank">MooTools</a>).
    </p>
    <pre class="prettyprint">
$.noConflict();
jQuery(document).ready(function($) {
    <span class="label label-info">jQuery Code der $ als Präfix nutzt</span>
});

<span class="label label-info">Code aus anderer Library der $ als Präfix nutzt</span>
</pre>

    <h5>Selektoren</h5>
    <p>
        Nun kann man entweder in der HTML-Datei selber oder in einer externen 
        JavaScript-Datei die jQuery Library nutzen.
        Um nun bspw. alle <span class="label">&lt;p&gt;</span>-Tags zu finden schreibt man $('p'), was soviel 
        bedeutet wie: jQuery, gib mir alle DOM-Elemente mit dem Tag-Namen 'p'.
    </p>
    <p>
        Das $-Zeichen steht in diesem Fall daf&uuml;r, dass Funktionen von jQuery genutzt 
        werden. Der folgende optionale Parameter ist der sogenannte Selektor und 
        kann entweder der Name eines Tag-Elements <span class="label">&lt;TAG-NAME&gt;</span> sein, 
        eine vergebene ID eines Tags <span class="label">&lt;div id="ID-NAME"&gt;</span> oder eine vergebene 
        Klasse <span class="label">&lt;div class="CLASS-NAME"&gt;</span>.
    </p>
    <p>
        Dementsprechend gibt es drei Notationen, wie man Elemente mit Hilfe der 
        jQuery-Selektoren finden kann:
    </p>
    <pre class="prettyprint">
<span class="label label-info">Tag-Name</span>
// Nur der Tag-Name (z.B. 'div' f&uuml;r alle &lt;div&gt;-Elemente)
var $pTags = $('p');

<span class="label label-info">Eindeutige ID</span>
// ID mit voranschreitendem #
var $myDiv = $('#myDiv');

<span class="label label-info">Klassen-Name</span>
// Klasse mit voranschreitendem .
var $myClasses = $('.myClasses');
</pre>
    
    <p>
        Man kann auch Selektoren verkn&uuml;pfen, wenn man bspw. &ouml;fters eine Klasse 
        f&uuml;r mehrere Elemente benutzt, aber einigen dieser Elemente auch IDs vergibt.
    </p>
    <pre class="prettyprint">
<span class="label label-info">Selektor-Kombination</span>
var $importantDiv = $('div.redBorder#importantDiv');
</pre>
    
    <p>
        In diesem Beispiel wird nach dem div-Element gesucht, welches die Klasse 
        "redBorder" hat und die ID "important" div. So w&uuml;rde nun also das Element 
        <span class="label label-success">&lt;div class="redBorder" id="importantDiv"&gt;</span> 
        selektiert werden, nicht jedoch 
        <span class="label label-important">&lt;div class="redBorder" id="author"&gt;</span>.
    </p>
    <p></p>
    <h5>Selektoren - die Zweite!</h5>
    <p>
        Neben der Selektion &uuml;ber IDs und Klassen-Namen hat man auch die Möglichkeit 
        anhand der Attribute eines Elements zu suchen.
    </p>
    <pre class="prettyprint">
<span class="label label-info">&lt;input value="5"&gt; ('equals')</span>
var $valueFiveInputs = $('input[value="5"]');
        
<span class="label label-info">&lt;input value="anyFirstElement"&gt; ('contains')</span>
var $valueFiveInputs = $('input[value*="First"]');
        
<span class="label label-info">&lt;input value="firstElement"&gt; ('startsWith')</span>
var $valueFiveInputs = $('input[value^="first"]');
        
<span class="label label-info">&lt;input value="thisOneAtLast"&gt; ('endsWith')</span>
var $valueFiveInputs = $('input[value$="Last"]');
</pre>
    
    <p>
        &uuml;ber diese Attribut-Selektoren hinaus gibt es noch weitere Attribut Selektoren 
        und können nat&uuml;rlich auch f&uuml;r andere Attribute eines Tags verwendet werden.
    </p>
    <p>
        Dar&uuml;ber hinaus gibt es auch Pseudo-Selektoren, wie auch in CSS.
    </p>
    <pre class="prettyprint">
// Suche alle Input-Elemente, die als Attribut 'checked' den Wert 'checked' haben
// (also alle Checkbox-Inputs, die ausgewählt worden sind)
var $checkedInputs = $('input:checked');
</pre>
    <h5>Konvention</h5>
    <p>
        Damit man in seinem Code erkennen kann, ob die gerade verwendete Variable 
        einen einfachen Wert oder ein mit jQuery selektiertes Element (bzw. Element-Array) 
        ist, sollte man den Variablen-Namen mit einem voranschreitendem $-Zeichen 
        kennzeichnen.
    </p>
    <p>
        Grund daf&uuml;r ist, dass man an einem jQuery-Element(-Array) weitere jQuery-Funktionen 
        nutzen kann (siehe dazu <a href="Conventions#whitespaces">'Method-Chaining'</a>).
    </p>
    
    <h3 id="events">Events</h3>
    <p>
        Im Laufe eines Projektes kann es unter Umständen notwendig sein, dass 
        man auf bestimmte Ereignisse in der Applikation achtet oder Funktionen 
        zu bestehenden Ereignissen hinzuf&uuml;gen möchte.
    </p>
    <p>
        Um Funktionen an Ereignisse zu binden, kann man jQuery's .on() oder .bind() 
        Funktion nutzen.<br />
    </p>
    <p>
        Möchte man zu einer bestimmten Zeit, dass eine hinzugef&uuml;gte Funktion bei 
        einem bestimmten Ereignis nicht mehr greift, verwendet man dazu die Funktion 
        .off() oder .unbind() von jQuery.
    </p>
    <p>
        Der Unterschied zwischen den Funktionen .on() und .bind() bzw. .off() und 
        .unbind() liegt darin, dass man .on() und .off() einen Selektor als Parameter 
        mit &uuml;bergeben kann.<br />
        Dadurch kann man explizit die Elemente rausnehmen, die die Funktion erhalten, 
        bzw. verlieren sollen, während mit .bind() und .unbind() nur dem Element, 
        dass man gerade verwendet, Funktionen zu Eregnissen hinzuf&uuml;gen oder entfernen 
        kann.
    </p>
    <pre class="prettyprint" id="bgEvent">
;(function($) {
    $(document).ready(function() {
        <span class="label label-info">// Variablen Deklaration</span>
        var $demoBgBtn = $('#demoBgBtn'),
            $bgElement = $('#bgEvent'),
            $unbindBtn = $('#unbindEventsBtn'),
            $bindBtn = $('#bindEventsBtn');
        
        $bindBtn.on('click', function() {
            <span class="label label-info">// Funktion hinzuf&uuml;gen</span>
            $demoBgBtn.on('click', function () {
                if ($bgElement.css('background-color') === 'rgb(245, 245, 245)') {
                    $bgElement
                        .css('background-color', 'rgb(58, 135, 173)')
                        .css('color', 'white');
                } else {
                    $bgElement
                        .css('background-color', 'rgb(245, 245, 245)')
                        .css('color', '#333');
                }
            });
        });

        $unbindBtn.on('click', function() {
            <span class="label label-info">// Entfernen der Funktion</span>
            $demoBgBtn.off();
        });
        
        <span class="label label-info">// Initiales Hinzuf&uuml;gen der Funktionen</span>
        $bindBtn.trigger('click');
    });
})(jQuery);
</pre>
    <p>
        <input class="btn btn-inverse" type="button" id="demoBgBtn" value="Demo" style="width: 75px;" />
        <input class="btn btn-success" type="button" id="bindEventsBtn" value="Bind" style="width: 75px;" />
        <input class="btn btn-danger" type="button" id="unbindEventsBtn" value="Unbind" style="width: 75px;" />
    </p>
    
    <h5>Konvention</h5>
    <p>
        F&uuml;r eine einheitliche Nutzung zum Hinzuf&uuml;gen und Entfernen von 
        Funktionen an Eregnissen sollte man die Funktionen .on() und .off() nutzen.<br />
        Der Vorteil dieser jQuery Funktionen ist auch, dass hier auf die unterschiedlichen 
        EventAttachment Funktionen unterschiedlicher Browser geachtet wird und 
        man sich darum nicht mehr selber k&uuml;mmern muss.
    </p>
    
    @*<h3>TBD</h3>
    <p>
        <ul>
            <li>RequireJS</li>
            <li>KnockoutJS</li>
        </ul>
    </p>
    
    <h3 id="requireJs">RequireJS</h3>
    <p>
        
    </p>
    
    <h3 id="knockoutJs">KnockoutJS</h3>
    <p>
        
    </p>*@
</div>

<div class="span3">
    <ul class="nav nav-tabs nav-stacked affix">
        <li><a href="#jQuery">jQuery</a></li>
        <li><a href="#events">Events</a></li>
        @*<li><a href="#requireJs">RequireJS</a></li>
        <li><a href="#knockoutJs">knockoutJS</a></li>*@
    </ul>
</div>
@section scripts {
    <script type="text/javascript" src="@Url.Content("~/Scripts/Demos/conventions2.js")"></script>
}
